<template>
  <div class="enterpriseTree">
    <div class="enterpriseTree_projectSearch">
      <el-input v-model="searchContent" style="width: 90%;" placeholder="关键词搜索">
        <i slot="suffix" class="el-input__icon el-icon-search" />
      </el-input>
      <div class="enterpriseTree_tree">
        <div id="tree-container" class="tree-container">
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="roleList"
            node-key="guid"
            :indent="0"
            :filter-node-method="filterNode"
            :default-expanded-keys="['all']"
          >
            <span
              slot-scope="{ data }"
              class="custom-tree-node"
              style="display:flex;width:100%;"
              @click="handleRole(data)"
            >
              <!-- <el-tooltip class="item" effect="dark" :content="data.label" placement="top-start"> -->
              <span
                style="overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 95%;
                font-size: 14px;
                margin-left: 6px;"
                :title="data.label"
              >
                <span class="custom-tree-node" style="font-size:16px;">
                  <!-- <svg-icon v-if="data.children" icon-class="enterprise" />
                  <svg-icon v-if="!data.children" icon-class="town" /> -->
                  <span style="font-size: 15px;">{{ data.label }}</span>
                </span>
              </span>
              <!-- </el-tooltip> -->
            </span>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { listEnterprise } from '@/api/projectLibrary/index';
import { getToken } from '@/utils/auth.js';
export default {
  name: 'EnterpriseTree',
  data() {
    return {
      searchContent: '',
      roleList: [],
      enterpriseGuid: '',
      isLowest: false,
      expandedList: []
    };
  },
  watch: {
    searchContent: {
      // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.$refs.tree.filter(newV);
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.getEnterpriseList();
    });
  },
  methods: {
    getEnterpriseList() {
      this.expandedList = [];
      listEnterprise({
        year: getToken('chooseYear'),
        status: '1',
        resultAsTree: true
      }).then(res => {
        if (res.success) {
          this.roleList = [{
            label: '全部',
            children: [],
            guid: 'all'
          }
          ];
          this.roleList[0].children = res.data;
        } else {
          this.roleList = [];
        }
      });
    },
    handleRole(node) {
      this.enterpriseGuid = '';
      if (node.guid === 'all') {
        this.enterpriseGuid = node.guid;
        this.isLowest = false;
        this.$parent.$refs.dynamicTables.isShow = false;
      } else {
        if (!node.children) {
          this.enterpriseGuid = node.guid;
          this.isLowest = true;
          this.$parent.$refs.dynamicTables.isShow = true;
        } else {
          this.isLowest = false;
          this.$parent.$refs.dynamicTables.isShow = false;
          node.children.map((item, index) => {
            this.enterpriseGuid += item.guid + ',';
          });
          this.enterpriseGuid = this.enterpriseGuid.substr(0, this.enterpriseGuid.length - 1);
        }
      }
      this.$parent.pageIndex = 0;
      this.$parent.pageSize = 50;
      this.$parent.tableLoading = true;
      this.$parent.$refs.dynamicTables.startIndex = 0;
      this.$parent.getData();
    },
    filterNode(value, data) {
      if (!value) {
        return true;
      } else {
        if (data.label) {
          return data.label.indexOf(value) !== -1;
        }
      }
    }
  }
};
</script>
<style scoped lang='scss'>
.enterpriseTree {
  height: 100%;
  background-color: #fff;
  border-radius: 5px;
}
.enterpriseTree_projectSearch {
  padding: 10px;
}
.tree-container {
  padding-top: 10px;
  padding-top: 10px;
  overflow-y: auto;
  height: calc(100vh - 220px);
}
</style>
